<template>
  <div id="container" :data="data">
    <chartTitle :title="title"></chartTitle>
    <div class="main" :id="id">

    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import autoSize from '../../uitils/auto-font-size.js'
  import chartTitle from '../chart-title/index.vue'
  export default {
    components: {
      chartTitle
    },
    name: 'chart-around-pie',
    props: {
      title: String,
      shadow: {
        type: Boolean,
        default: true
      },
      color: {
        type: Array,
        default: () => {
          return ['#00CBFF', '#D33C36', '#FF6600', '#F4CD28', '#00B67C', '#A3D804']
        }
      },
      data: {
        type: Array,
        default: () => {
          return []
        }
      },
    },
    data() {
      return {
        minAngle: 45,
        center: ['28%', '50%']
      }
    },
    computed: {
      id: function() {
        return `main-${Math.random()}`
      },
      dataMap: function() {
        let obj = {}
        this.data.map((item, index) => {
          obj[item.name] = {
            dataIndex: index,
            name: item.name,
            value: item.value,
            ratio: item.ratio
          }
        })

        return obj
      }
    },
    mounted() {
      setTimeout(() => {
        this.onInit()
      }, 3500)
    },
    updated() {
      setTimeout(() => {
        this.onInit()
      }, 1000)
    },
    methods: {
      onInit() {
        var chartDom = document.getElementById(this.id);
        var myChart = echarts.init(chartDom);
        var option;

        let series = [
          // 圆心
          {
            radius: ['0', '12%'],
            center: this.center,
            type: 'pie',
            color: '#C2D7FD',
            minAngle: 30,
            emphasis: {
              scale: false
            },
            label: {
              show: false
            },
            hoverAnimation: false,
            tooltip: {
              show: false
            },
            z: 5,
            itemStyle: {
              shadowColor: '#000',
              shadowBlur: 30
            },
            data: [{
              value: 0
            }],
          },
          // 圆心外圈
          {
            radius: ['20%', '19%'],
            center: this.center,
            type: 'pie',
            color: '#C2D7FD',
            minAngle: 30,
            emphasis: {
              scale: false
            },
            label: {
              show: false
            },
            hoverAnimation: false,
            tooltip: {
              show: false
            },
            itemStyle: {
              shadowColor: '#000',
              shadowBlur: 10
            },
            z: 5,
            data: [{
              value: 0
            }],
          },
          // 外圈
          {
            radius: ['70%', '69%'],
            center: this.center,
            type: 'pie',
            minAngle: 30,
            emphasis: {
              scale: false
            },
            label: {
              show: false
            },
            hoverAnimation: false,
            tooltip: {
              show: false
            },
            itemStyle: {
              color: '#00CBFF',
              shadowColor: '#000',
              shadowBlur: 10
            },
            z: 5,
            data: [{
              value: 0
            }],
          },
        ];

        let maxRadius = 60,
          barWidth = 5,
          barGap = 5;
        let sumValue = 0;
        let legendData = []
        this.data.map(item => {
          legendData.push(item.name)
          sumValue += item.value;
        })



        this.data.map((item, i) => {
          series.push({
            type: 'pie',
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [(maxRadius - i * (barGap + barWidth)) + '%', (maxRadius - (i + 1) *
              barWidth - i * barGap) + '%'],
            center: this.center,
            label: {
              show: false
            },
            itemStyle: {
              label: {
                show: false,
              },
              labelLine: {
                show: false
              },
              borderWidth: 5,
            },
            data: [{
              value: item.value,
              name: item.name,
              itemStyle: {
                color: this.color[i]
              }
            }, {
              value: item.value === 0 ? 1 : sumValue - item.value,
              name: '',
              itemStyle: {
                color: "transparent",
              },
              tooltip: {
                show: false
              },
              hoverAnimation: false
            }]
          })
          series.push({
            name: 'blank',
            type: 'pie',
            silent: true,
            z: 0,
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [(maxRadius - i * (barGap + barWidth)) + '%', (maxRadius - (i + 1) *
              barWidth - i * barGap) + '%'],
            center: this.center,
            label: {
              show: false
            },
            itemStyle: {
              label: {
                show: false,
              },
              labelLine: {
                show: false
              },
              borderWidth: 5,
            },
            data: [{
              value: 0,
              itemStyle: {
                color: "rgba(255, 255, 255,.13)",
                borderWidth: 0
              },
              tooltip: {
                show: false
              },
              hoverAnimation: false
            }]
          });
        })

        option = {
          animationDuration: 4000,
          animationDurationUpdate: 2000,
          // backgroundColor: '#000',
          tooltip: {
            show: true,
            trigger: "item",
          },
          grid: {
            top: 0
          },
          legend: {
            show: true,
            left: '52%',
            orient: 'vertical',
            top: 'center',
            icon: "roundRect",
            selectedMode: false,
            data: ['01', '02', '03'].concat(legendData),
            itemWidth: autoSize(14),
            itemHeight: autoSize(14),
            itemGap: autoSize(26),
            textStyle: {
              fontSize: autoSize(14),
              rich: {
                a: {
                  fontSize: autoSize(14),
                  color: '#',
                },
                value: {
                  fontSize: autoSize(14),
                  color: '#fff'
                }
              },
            },
            formatter: params => {
              const {
                name,
                value,
                dataIndex,
                ratio
              } = this.dataMap[params]
              // return `{a|${params}}{value| / ${ratio} ${value || 0}}`
              return `{a|${params}}{value| / ${ratio}}`
            },
          },
          series: series,
        };

        myChart.setOption(option, true)
        window.addEventListener('resize', () => {
          myChart.resize()
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  @keyframes lineMove{
     0%{width: 0;}
     100%{width: 90%;}
  }
  #container {
    width: 100%;
    height: 30.4vh;
    color: #fff;
    background-color: rgba(7, 38, 46, .2);
    // border: 1px solid rgba(194, 215, 253, .2);
    display: flex;
    flex-flow: column;
    .main {
      flex: 1;
    }
  }
</style>
